<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>瀑布流</title>
		<style type="text/css">
			body{
				margin: 0;
				padding: 0;
				background-color: #ccc;
			}
			.clear-float:after{
				content: '';
				display: table;
				clear: both;
			}
			.container{
				width: 1300px;
				margin: 0 auto;
			}
			.container .img-box{
				float: left;
				padding: 5px;
				cursor: pointer;
			}
			.container .img-box img{width: 250px;}
		</style>
	</head>
	<body>
		
		<div id="J_Container" class="container clear-float"></div>
		
		<script src="../static/js/jquery/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		;(function($){
			var falls = {
				containerSel : '', // 装图片列表的容器
				imgUrl : '', // 图片请求地址
				//每列当前的高度
			    _topArry:[0,0,0,0,0], //每列当期距离浏览器的左边距
			    _leftArry:[], //每次加载的图片
			    _imgArray:[], //每次加载的第一张图片相对于所有图片（包括已加载图片）的索引
			    _num:0, //加载图片数，默认9张，根据实际修改
			    _dataNum:9,
			    /* 获取图片数据 */
				getData : function (url){
					this.imgUrl = url;
					$.getJSON(this.imgUrl, function(data){
						if(data.success){
							var row = data.row,
								len = row.length,
								html = "",
								$cont = $(falls.containerSel);
								
							//将获取到的数据通过字符串连接的方式添加到html内容中
							for (var i=0; i<len; i++) {
								html += '<div class="img-box">'
										+'<img src="../static/'+ row[i].src +'" />'
									+'</div>';
							}
							
							$cont.append(html);
							falls._getLeft();
							
							//可确保不同的显示器屏幕能初始化时便将图片布满屏幕
							if(falls._getMinHeight() < window.screen.height){
								falls.getData(falls.imgUrl);
							}
							
							falls._imgArray = [];
							
							$cont.find('.img-box').each(function(i){
								if(i >= falls._num){
									falls._imgArray.push(this);
								}
							});
							
							falls._num += falls._dataNum;
							
							//修改每张图片的位置
	                		falls._reset();
						}
					});
				},
				/**
				 * 获取每列图片的高度、距离浏览器的左边距
				 * 每次加载时都需要将图片放到当前显示的最短的那列图片之下，
				 * 所以需要通过保存每列当前高度的全局数组找到最短的那一列图片，并返回其值。
				 */
				_getMinHeight : function (){
					return Math.min.apply(null,this._topArry);
				},
				_getLeft : function (){
					var $cont = $(this.containerSel);
					for(var i = 0; i < 5; i++){
				        var left = $cont.find(".img-box").eq(i).offset().left;
				        this._leftArry.push(left);
				    }
				},
				/**
				 * 控制每张图片的加载位置
					得到最短一列图片后，便可根据两个数组topArray[]、leftArray[]对应的索引值相同，
					很容易的找到最短那一列距离浏览器的左边距
				 * */
				_reset : function (){
					var img = this._imgArray,
						len = img.length;
					for (var i = 0; i < len; i++) {
						var    minHeight = this._getMinHeight(),
	            		index = 0;
	            		
	            		for(var x = 0;x < this._dataNum; x++){
				            if(minHeight == this._topArry[x]){
				                index = x;
				                break;
				            }            
				        }
	            		
	            		$(img[i]).css({
				            "position":"absolute",
				            "top":minHeight,
				            "left":this._leftArry[index]
				        });
				        
				        this._topArry[index] += $(img[i]).height();
					}
				},
				/* 初始化 */
				init : function(){
					$(function(){
						falls.containerSel = '#J_Container';
						falls.getData("../static/json/falls.json");
					});
					window.onscroll = function(){
					    var minHeight = falls._getMinHeight();
					    //当屏幕滚动的距离大于最短高度的二分之一（可任意设置，看个人喜好），再次加载图片
					    if(window.scrollY > minHeight/2){
					        falls.getData(falls.imgUrl);
					    }
					}
				}
			};
			
			falls.init();
		})(jQuery);
			
		</script>
	</body>
</html>
